'use strict';

import React, { PropTypes, Component } from 'react';
import ReactDom from 'react-dom';
import classNames from '../../utils/classNames';
import YmtApi from 'YmtApi';

class UserCollect extends Component {
	componentDidMount(){
		let  dom = ReactDom.findDOMNode(this);

		let timer = null;
		window.addEventListener('scroll',()=>{
			clearTimeout(timer);
			timer = setTimeout(()=>{
				let scrollTop = document.body.scrollTop,
					groupBar = dom.querySelector('.group-bar'),
					groupBarWrapper = dom.querySelector('.group-bar-wrapper'),
					domTop = groupBarWrapper.getBoundingClientRect().top;
				if(scrollTop >= domTop){
					!/fixed/.test(groupBar.className) && (groupBar.className += ' fixed');
				}else{
					groupBar.className = groupBar.className.replace(/fixed/,'');
				}
			},300)
			
			//ReactDom.find('')
		})
	}
	render() {
		// 1dangerouslySetInnerHTML={{__html: '<small>开团数</small>'}}
		const { userCollect = {data:{}},isMySelf,openUrl,hasLogin = function(){},isDetail=false } = this.props;
		const { TopicDto = {} } = (userCollect.data || {})

		let createClassName = '',
			joinClassName = '';
		if(userCollect.state === 2){
			createClassName = TopicDto && TopicDto.OpenGroupCount?'next':'';
			joinClassName = TopicDto && TopicDto.JoinGroupCount?'next':'';
		}
		let groupBar = (function(){
			if(hasLogin()){
				return (
					<h3 className={classNames("group-bar border-bottom",{borderBtm:isDetail})}>
						<div>
							<span className={classNames('pull-left',{detail:!isDetail})}>我的 开团数{TopicDto.OpenGroupCount}/天 参团数{TopicDto.JoinGroupCount}/期</span>
							<span className={classNames('pull-left desc',{hide:isDetail})}>我的开团数和参团数</span>
							{!isMySelf?<small className="pull-right" 
								  onClick={()=>{
						  				openUrl({
								   			url:'/mylist.html',
								   			title:'我的砍价团'
								   		})
								   }}>查看我的砍价团<i className="iicon-arrow iicon-arrow-right"></i>
							</small>:''}
						</div>
					</h3>
				)
			}else{
				const clickHanld = YmtApi.isWechat?function(){
					window.location.href='http://download.app.ymatou.com/index.aspx?from=inapp25';
				}:YmtApi.toLogin;
				return (
					<h3 className={classNames("group-bar border-bottom",{borderBtm:isDetail})}>
						我的开团数和参团数 ?
						<small className="pull-right" 
							   onClick={clickHanld}>{YmtApi.isWechat?'下载app去开团':'登录后查看哦~'} ></small>
					</h3>
				)
			}
		}.bind(this))();

		let colletHtml = '';
		if(!isDetail && hasLogin()){
			colletHtml = (
				<div className="info-list">
					<div className="pull-left">
						<div className="info-number">
							<div className={`info-number-list ${createClassName}`}>
								<strong>0</strong>
								{ !!createClassName ?<strong>{ TopicDto.OpenGroupCount }</strong>:'' }
							</div>
						</div> /天
						<div><small>开团数{TopicDto.OpenGroupCount>0?'':'(明日可继续开团)'}</small></div>
					</div>
					<div className="pull-left">
						<div className="info-number">
							<div className={`info-number-list ${joinClassName}`}>
								<strong>0</strong>
								{ !!joinClassName ?<strong>{ TopicDto.JoinGroupCount }</strong>:'' }
							</div>
						</div> /期
						<div>
							<small>参团数{TopicDto.JoinGroupCount>0?'':'(下期可继续参团)'}</small>
						</div>
					</div>
				</div>
			)
		}

		return (
			<div className="user-collect">
				<div className="group-bar-wrapper">
					{ groupBar }
				</div>
				{ colletHtml }
			</div>
		)
	}
}

export default UserCollect